<template>
  <div class="asset-card card-item">
    <div class="asset__header">
      <span>{{ props.item.category }}</span>
      <span>{{ formatAmount(props.item.totalAmount) }}</span>
    </div>

    <div class="asset__body">
      <div v-for="(asset, index) in props.item.itemList"
           :key="index" class="asset-item" @click="editClick(asset)">
        <svg-icon :name="getAssetIcon(asset.name)" />

        <div class="asset-name">
          <span>{{ asset.name }}</span>
          <span v-if="asset.remark">({{ asset.remark }})</span>
        </div>

        <div class="asset-amount">
          <div class="item" style="color: #4169E1;">
            <i class="fa-solid fa-flag"></i>
            <span>{{ asset.owner }}</span>
          </div>
          <div class="item" style="color: #DAA520;">
            <i class="fa-solid fa-cny"></i>
            <span>{{ formatAmount(asset.amount) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { SvgIcon } from 'vue3-common'
import { defineProps, PropType } from 'vue'
import { IAsset, IAssetItem } from '@/types/asset.ts'
import { formatAmount } from 'vue3-common/utils/numberUtil'
import { useAssetStore } from '@/store/asset.ts'
import { useRouter } from 'vue-router'

const props = defineProps({
  item: {
    required: true,
    type: Object as PropType<IAsset>
  }
})

const assetStore = useAssetStore()
const router = useRouter()

const getAssetIcon = (name: string) => {
  if (name.includes('银行')) {
    return 'asset-银行'
  } else {
    return `asset-${name}`
  }
}

const editClick = async (asset: IAssetItem) => {
  assetStore.assetApiType = 'UPDATE'
  assetStore.currentAssetRecord = assetStore.assetRecordList.find((item) => item.id === asset.id)

  await router.push({ name: 'AssetDetailId', params: { id: asset.id } })
}
</script>

<style lang="scss">
.asset-card {
  padding: 10px;

  display: grid;
  grid-template-rows: 25px 1fr;
  align-items: center;
  gap: 15px;

  .asset__header {
    padding-bottom: 5px;
    border-bottom: 1px solid var(--el-color-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
  }

  .asset__body {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .asset-item {
      display: grid;
      grid-template-columns: 20px 1fr 150px;
      align-items: center;
      gap: 5px;
      color: #4F4F4F;

      .asset-amount {
        justify-self: right;

        display: flex;
        align-items: center;
        gap: 10px;

        .item {
          display: flex;
          align-items: center;
          gap: 5px;
        }
      }
    }
  }
}
</style>
